import React, { Component } from "react";
import { Card, Icon } from "antd";
import * as echarts from "echarts";
class detail extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  options = () => {
    var chartDom = document.getElementsByClassName("main")[0];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      xAxis: {
        type: "category",
        name: "时间（年，月，日）",
        data: [
          "2021-07-08/09:03",
          "2021-07-08/10:03",
          "2021-07-08/11:03",
          "2021-07-08/12:03",
          "2021-07-08/13:03",
          "2021-07-08/14:03",
          "2021-07-08/15:03",
        ],
      },
      axisTick: {
        alignWithLabel: true,
      },
      legend: {
        data: ["e", "e1"],
      },
      yAxis: {
        name: "流量bps",
        type: "value",
        axisLabel: {
          formatter: "{value}kbps",
        },
      },
      series: [
        {
          name: "e",
          data: [120, 132, 101, 134, 90, 230, 210],
          type: "line",
          stack: "Total",
          smooth: true,
          color: "#87CEEB",
        },
        {
          name: "e1",
          data: [220, 182, 191, 234, 290, 330, 310],
          type: "line",
          stack: "Total",
          smooth: true,
        },
      ],
    };

    option && myChart.setOption(option);
  };
  componentDidMount() {
    this.options();
  }
  render() {
    const title = (
      <span>
        <Icon
          type="rollback"
          style={{ color: "blue", fontSize: "16px" }}
          onClick={() => this.props.history.goBack()}
        />
        &nbsp;&nbsp; 设备详情
      </span>
    );
    return (
      <Card title={title}>
        <div>
          <div
            style={{
              display: "flex",

              justifyContent: "space-around",
              flexWrap: "wrap",
            }}
          >
            <p
              style={{
                width: 600,
                height: 25,
                lineHeight: "25px",
                background: "#ececec",
                fontWeight: 900,
              }}
            >
              设备ip: 176.28.50.156
            </p>
            <p
              style={{
                width: 600,
                height: 25,
                lineHeight: "25px",
                background: "#ececec",
                fontWeight: 900,
              }}
            >
              设备类型:电脑端设备
            </p>
            <p
              style={{
                width: 600,
                height: 25,
                lineHeight: "25px",
                background: "#ececec",
                fontWeight: 900,
              }}
            >
              设备mac: 00-50-56 fd-a7-cd
            </p>
            <p
              style={{
                width: 600,
                height: 25,
                lineHeight: "25px",
                background: "#ececec",
                fontWeight: 900,
              }}
            >
              操作系统: Windows
            </p>
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-around",
              flexWrap: "wrap",
              marginTop: 20,
            }}
          >
            <p
              style={{
                width: 600,
                height: 25,
                lineHeight: "25px",
                background: "#ececec",
                fontWeight: 900,
              }}
            >
              接入网络: yida
            </p>
            <p
              style={{
                width: 600,
                height: 25,
                lineHeight: "25px",
                background: "#ececec",
                fontWeight: 900,
              }}
            >
              owner:陈某
            </p>
            <p
              style={{
                width: 600,
                height: 25,
                lineHeight: "25px",
                background: "#ececec",
                fontWeight: 900,
              }}
            >
              组织架构: ITS部门
            </p>
            <p
              style={{
                width: 600,
                height: 25,
                lineHeight: "25px",
                background: "#ececec",
                fontWeight: 900,
              }}
            >
              杀毒软件:未发现
            </p>
            <p
              style={{
                width: 600,
                height: 25,
                lineHeight: "25px",
                background: "#ececec",
                fontWeight: 900,
              }}
            >
              设备厂商: /
            </p>
            <p
              style={{
                width: 600,
                height: 25,
                lineHeight: "25px",
                background: "#ececec",
                fontWeight: 900,
              }}
            >
              合规检测状态:未检测
            </p>
          </div>
        </div>
        <Card>
          <div className="main" style={{ width: 1200, height: 400 }}></div>
        </Card>
      </Card>
    );
  }
}

export default detail;
